import { getVisitorTalkApi } from '@/api/custcare/visitor/visitor'
import { TalkList, VisitorTalkParam } from '@/api/custcare/visitor/VisitorModel'
import { StatusCode } from '@/http/request'
import { onMounted, reactive, nextTick, ref, watch, onUpdated } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { custCareUserStore } from '@/store/custcare'
import { useRoute } from 'vue-router'
import { menuStore } from '@/store/menu'
import useInstance from '@/hooks/useInstance'
import { EditType } from '@/types/BaseEnum'
import { MESSAGE_TYPE } from '@/types/CustcareEnum'

export default function useTalkTable() {
    const mStore = menuStore()
    const custStore = custCareUserStore()
    const route = useRoute()

    const { global } = useInstance()

    // 定义列表查询的参数
    const listParam = reactive<VisitorTalkParam>({
        online: 1
    })
    // 表格的高度
    const tableHeight = ref(0)
    // 表格数据
    const visitorTable = reactive({
        list: Array<TalkList>()
    })

    const isOpenChat = ref(false)
    const visitorInfo = reactive({
        data: {}
    })

    const recordRef = ref<{
        show: (type: string, channelId: string) => void
    }>()

    const talkActiveName = ref('online')
    const visitorActiveName = ref('visitor')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        if (tab.props.name == 'online') {
            talkActiveName.value = 'online'
            listParam.online = 1
        } else {
            talkActiveName.value = 'offline'
            listParam.online = 0
        }
        getVisitorTable()
    }

    const visitorHandleClick = (tab: TabsPaneContext, event: Event) => {
        if (tab.props.name == 'visitor') {
            visitorActiveName.value = 'visitor'
        } else {
            visitorActiveName.value = 'trail'
        }
    }

    // 获取表格数据
    const getVisitorTable = async () => {
        let res = await getVisitorTalkApi(listParam)
        if (res && res.code == StatusCode.Success) {
            console.log('对话列表：', res.data)
            visitorTable.list = res.data
        }
    }

    const chatVisitor = (visitor: any) => {
        isOpenChat.value = false
        console.log('对话游客：', visitor)
        visitorTable.list.forEach((item) => {
            if (visitor.id == item.id) {
                item.unread_count = 0
            }
        })
        visitorInfo.data = visitor
        setTimeout(() => {
            isOpenChat.value = true
        }, 100)
    }

    const onTrailChange = () => {
        getVisitorTable()
        setTimeout(() => {
            isOpenChat.value = false
        }, 100)
    }

    watch(custStore.getRealTimeMsg, (newRealTimeMsg, o) => {
        if (newRealTimeMsg.type == MESSAGE_TYPE.TYPE_NOTIFY_ONLINE) {
            global.$message({
                message: '有访客上线！',
                type: 'success'
            })
            talkActiveName.value = 'online'
            listParam.online = 1
            getVisitorTable()
        } else if (newRealTimeMsg.type == MESSAGE_TYPE.TYPE_NOTIFY_OFFLINE) {
            global.$message({
                message: '有访客下线啦！',
                type: 'success'
            })
            talkActiveName.value = 'offline'
            listParam.online = 0
            getVisitorTable()
        } else {
            visitorTable.list.forEach((item) => {
                if (item.uuid == newRealTimeMsg.user_uuid) {
                    item.msg = newRealTimeMsg.content
                    if (isOpenChat.value == false) {
                        item.unread_count = item.unread_count + 1
                    }
                } else {
                    item.msg = newRealTimeMsg.content
                }
            })
        }
    })

    watch(route, (n, o) => {
        if (n.path !== '/custcare/talk') {
            isOpenChat.value = false
        }
    })

    onUpdated(() => {
        mStore.setMenuRemoveNewText()
    })

    // 首次加载
    onMounted(() => {
        getVisitorTable()
        nextTick(() => {
            tableHeight.value = window.innerHeight - 180
            setTimeout(() => {
                mStore.setMenuRemoveNewText()
            }, 800)
        })
    })

    return {
        isOpenChat,
        talkActiveName,
        handleClick,
        visitorActiveName,
        visitorHandleClick,
        listParam,
        tableHeight,
        visitorTable,
        chatVisitor,
        visitorInfo,
        recordRef,
        onTrailChange
    }
}
